<template>
  <div class="style-customizer">
    <h2>风格定制</h2>

    <div class="style-types">
      <div class="predefined-styles">
        <h3>预设风格</h3>
        <div class="style-grid">
          <div v-for="style in predefinedStyles"
               :key="style.name"
               class="style-card"
               :class="{ 'active': selectedStyle === style.name }"
               @click="selectStyle(style)">
            <div class="style-preview" :style="getPreviewStyle(style)"></div>
            <div class="style-info">
              <h4>{{ style.name }}</h4>
              <p>{{ style.description }}</p>
            </div>
          </div>
        </div>
      </div>

      <div class="custom-styles">
        <h3>自定义风格</h3>
        <button @click="showCustomForm = !showCustomForm" class="toggle-btn">
          {{ showCustomForm ? '取消' : '创建新风格' }}
        </button>

        <div v-if="showCustomForm" class="custom-form">
          <div class="form-group">
            <label>风格名称:</label>
            <input v-model="newStyle.name" type="text" placeholder="输入风格名称">
          </div>

          <div class="form-group">
            <label>线条粗细:</label>
            <select v-model="newStyle.params.line_weight">
              <option value="1">细</option>
              <option value="2">中等</option>
              <option value="3">粗</option>
            </select>
          </div>

          <div class="form-group">
            <label>色彩方案:</label>
            <select v-model="newStyle.params.color_palette">
              <option value="pastel">柔和</option>
              <option value="vibrant">鲜艳</option>
              <option value="grayscale">黑白</option>
            </select>
          </div>

          <div class="form-group">
            <label>阴影风格:</label>
            <select v-model="newStyle.params.shading">
              <option value="none">无阴影</option>
              <option value="cel">卡通阴影</option>
              <option value="soft">柔和阴影</option>
            </select>
          </div>

          <button @click="saveCustomStyle" class="save-btn">保存风格</button>
        </div>

        <div v-if="customStyles.length > 0" class="style-grid">
          <div v-for="style in customStyles"
               :key="style.name"
               class="style-card"
               :class="{ 'active': selectedStyle === style.name }"
               @click="selectStyle(style)">
            <div class="style-preview" :style="getPreviewStyle(style)"></div>
            <div class="style-info">
              <h4>{{ style.name }}</h4>
              <p>{{ style.description }}</p>
            </div>
          </div>
        </div>

        <p v-else class="no-styles">暂无自定义风格</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      predefinedStyles: [],
      customStyles: [],
      selectedStyle: null,
      showCustomForm: false,
      newStyle: {
        name: "",
        description: "自定义风格",
        params: {
          line_weight: 2,
          color_palette: "vibrant",
          shading: "cel"
        }
      }
    };
  },
  async created() {
    await this.loadStyles();
  },
  methods: {
    async loadStyles() {
      try {
        const response = await this.$http.get("/api/styles");
        this.predefinedStyles = response.data.styles.predefined;
        this.customStyles = response.data.styles.custom;
      } catch (error) {
        console.error("加载风格失败:", error);
      }
    },
    selectStyle(style) {
      this.selectedStyle = style.name;
      this.$emit("style-selected", style);
    },
    getPreviewStyle(style) {
      // 根据风格参数生成预览样式
      const bgColor = {
        pastel: "#ffddee",
        vibrant: "#ff9900",
        grayscale: "#cccccc"
      }[style.params.color_palette] || "#ffffff";

      return {
        backgroundColor: bgColor,
        borderWidth: `${style.params.line_weight || 2}px`,
        boxShadow: style.params.shading === "none" ? "none" : "0 2px 5px rgba(0,0,0,0.2)"
      };
    },
    async saveCustomStyle() {
      if (!this.newStyle.name.trim()) {
        alert("请输入风格名称");
        return;
      }

      try {
        const response = await this.$http.post("/api/save-style", {
          name: this.newStyle.name,
          params: this.newStyle.params
        });

        if (response.data.status === "success") {
          this.customStyles.push(response.data.style);
          this.newStyle = {
            name: "",
            description: "自定义风格",
            params: {
              line_weight: 2,
              color_palette: "vibrant",
              shading: "cel"
            }
          };
          this.showCustomForm = false;
          alert("风格保存成功!");
        }
      } catch (error) {
        console.error("保存风格失败:", error);
        // alert("保存失败: " + (error.response?.data?.message || "请重试"));
      }
    }
  }
};
</script>

<style scoped>
.style-customizer {
  padding: 20px;
}

h2, h3 {
  color: #333;
  margin-bottom: 15px;
}

.style-types {
  display: flex;
  gap: 30px;
}

.predefined-styles, .custom-styles {
  flex: 1;
}

.style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  margin-top: 10px;
}

.style-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s;
}

.style-card:hover {
  transform: translateY(-5px);
}

.style-card.active {
  border: 2px solid #4CAF50;
}

.style-preview {
  height: 120px;
  border-bottom: 1px solid #ddd;
}

.style-info {
  padding: 10px;
}

.style-info h4 {
  margin: 0 0 5px 0;
  color: #444;
}

.style-info p {
  margin: 0;
  font-size: 0.9em;
  color: #666;
}

.toggle-btn {
  background-color: #2196F3;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 15px;
  cursor: pointer;
}

.custom-form {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 10px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input, .form-group select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.save-btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  margin-top: 10px;
  cursor: pointer;
}

.no-styles {
  color: #666;
  font-style: italic;
}
</style>